<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>互动视频与AI结合</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/playInterVid.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/jq.min.js"></script>
    <style>
        .screen-change {
            position: absolute !important;
            left: 50% !important;
            top: 50% !important;
            overflow: hidden !important;
            z-index: 10 !important
        }

        .screen-change.w {
            height: 100vw;
            width: 100vh;
            transform: translate(-50%, -50%) rotate(90deg);
            -webkit-transform: translate(-50%, -50%) rotate(90deg);
        }

        .screen-change.h {
            height: 100vh;
            width: 100vw;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .screen-change.W {
            height: 100vw !important;
            width: 100vh !important;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }

        .screen-change.H {
            height: 100vh !important;
            width: 100vw !important;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }
    </style>
</head>

<body class="h screen-change">
    <div id="playVid" class="H screen-change">
        <video autoplay :src="vidSrc" id="video" controls @contextmenu="rightCli" @play="playing" @ended="stoping"
            webkit-playsinline="true" playsinline="true"></video>
        <iframe src="" id="openPlayInter" frameborder="0" style="display: none;"></iframe>
        <div id="pauseSty" v-show="botIsVid" class="H screen-change">
            <div class="flexBox">
                <div id="continue" @click="continuePlay">
                    <img src="./images/continue.png">
                    <p>继续实验</p>
                </div>
                <div id="resetPlay" @click="rebackTop">
                    <img src="./images/resetPlay.png">
                    <p>再看一遍</p>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
    <script src="./js/playInterVid.js"></script>
    <script>
   
        /** 手机端自动横屏 */
        ! function () {
            var viewport = document.getElementById('viewport');
            var dw = null;
            var screenChange = document.getElementsByClassName('screen-change');

            function a() {
                if (document.body.clientHeight > document.body.clientWidth) {
                    dw = 750; //页面的高度
                    screenChange[0].classList.remove('h');
                    screenChange[0].classList.add('w');
                    screenChange[1].classList.remove('H');
                    screenChange[1].classList.add('W');
                    screenChange[2].classList.remove('H');
                    screenChange[2].classList.add('W');
                } else if (document.body.clientHeight < document.body.clientWidth) {
                    dw = 1334; //页面的宽度
                }
                viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
            }
            a();
            window.addEventListener("orientationchange", function () {
                if (window.orientation == 0) {
                    screenChange[0].classList.remove('h');
                    screenChange[0].classList.add('w');
                    screenChange[1].classList.remove('H');
                    screenChange[1].classList.add('W');
                    screenChange[2].classList.remove('H');
                    screenChange[2].classList.add('W');
                    dw = 750; //页面的高度
                    viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
                } else if (window.orientation == 90) {
                    screenChange[0].classList.remove('w');
                    screenChange[0].classList.add('h');
                    screenChange[1].classList.remove('W');
                    screenChange[1].classList.add('H');
                    screenChange[2].classList.remove('W');
                    screenChange[2].classList.add('H');
                    dw = 1334; //页面的宽度
                    viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')
                }
            }, false);
        }(window);
        var vm = new Vue({
            el: "#playVid",
            data() {
                return {
                    vidSrc: "", // 视频地址
                    isplay: true, // False暂停 true播放
                    info: {}, //存放互动视频的信息
                    children: [], // 存放下一分支的信息
                    botIsVid: false, //下一分支是视频   控制视频暂停时，是否出现的播放下一分支/重新播放组件
                }
            },
            methods: {
                /**
                 * @continuePlay : 视频暂停继续播放下一分支  @rebackTop ：视频暂停再看一变按钮
                 * @rightCli ： 右击视频事件禁止   @playing ： 视频开始播放  @stoping : 视频播放结束
                 * 
                 */
                continuePlay() { //继续下一分支时  判断是视频还是游戏
                    // this.children = this.children.children[0];
                    console.log(this.children.label);
                    if (this.children.interGame) {
                        this.botIsVid = false;
                        let interGame = this.children.interGame;
                        console.log(interGame);
                        let that = this;
                        $("#openPlayInter").attr('src',
                            `http://t.kexuemihe.com/studentPort/playInterGame.html?type=${interGame._interType}&_interId=${interGame._interId}`
                        ).show();
                        $(window).unbind("message").on("message", function (e) {
                            // alert(e.originalEvent.data)
                            e.preventDefault();
                            if (e.originalEvent.data) {
                                $("#openPlayInter").hide();
                                console.log(that.children);
                                if (that.children.children == 0) {
                                    console.log("互动播放结束，最后分支为ai互动");
                                    return false;
                                }
                                that.children = that.children.children[0];
                                console.log(that.children);
                                if (that.children.interGame) {
                                    interGame = that.children.interGame;
                                    $("#openPlayInter").attr('src',
                                        `../studentPort/playInterGame.html?type=${interGame._interType}&_interId=${interGame._interId}`
                                    );
                                    $("#openPlayInter").show();
                                }
                                if (that.children.playUrl) {
                                    that.vidSrc = that.children.playUrl;
                                    console.log(that.vidSrc);
                                    $("#video")[0].currentTime = 0;
                                    $("#video")[0].play();
                                }
                            };
                        });
                    } else {
                        if (this.children.children.length == 0) {
                            this.botIsVid = false;
                            console.log("播放结束");
                            return false;
                        }
                        this.botIsVid = true;
                        this.vidSrc = this.children.playUrl;
                        console.log(this.vidSrc);
                        $("#video")[0].currentTime = 0;
                        $("#video")[0].play();
                    }
                },
                rebackTop() { //重新播放
                    this.botIsVid = false;
                    $("#video")[0].currentTime = 0;
                    $("#video")[0].play();
                    this.isplay = true;
                },
                rightCli(e) {
                    e.preventDefault();
                },
                playing() {
                    this.botIsVid = false; //视频开始要将视频播放完的组件隐藏
                    $("#video").attr("controls", "true"); //暂停选择下一分支时，将视频控件删除（隐藏实现不了，所以只能删除属性）
                },
                stoping() {
                    this.isplay = false;
                    $("#video").removeAttr("controls"); //播放结束选择下一分支时，将视频控件删除（隐藏控件实现不了，所以只能删除属性）
                    console.log(this.children.label);
                    if (this.children.interGame) {
                        this.botIsVid = false;
                        let interGame = this.children.interGame;
                        // console.log(interGame);
                        let that = this;
                        $("#openPlayInter").attr('src',
                            `http://t.kexuemihe.com/studentPort/playInterGame.html?type=${interGame._interType}&_interId=${interGame._interId}`
                        );
                        $("#openPlayInter").show();
                        $(window).unbind("message").on("message", function (e) {
                            e.preventDefault();
                            // console.log(e.originalEvent.data);
                            if (e.originalEvent.data) {
                                $("#openPlayInter").hide();
                                console.log(that.children);
                                if (that.children.children == 0) {
                                    console.log("互动播放结束，最后分支为ai互动");
                                    return false;
                                }
                                that.children = that.children.children[0];
                                console.log(that.children);
                                if (that.children.interGame) {
                                    interGame = that.children.interGame;
                                    $("#openPlayInter").attr('src',
                                        `../studentPort/playInterGame.html?type=${interGame._interType}&_interId=${interGame._interId}`
                                    );
                                    $("#openPlayInter").show();
                                }
                                if (that.children.playUrl) {
                                    that.vidSrc = that.children.playUrl;
                                    console.log(that.vidSrc);
                                    $("#video")[0].currentTime = 0;
                                    $("#video")[0].play();
                                }
                            };
                        });
                    } else {
                        console.log(this.children);
                        if (this.children.children.length == 0) {
                            this.botIsVid = false;
                            console.log("播放结束,最后分支为互动视频");
                            return false;
                        }
                        this.children = this.children.children[0]
                        console.log(this.children.label);
                        this.botIsVid = true;
                    }
                },
                getAddress() {
                    let href = location.href.split("=")[1]; //获取到地址栏传过来的id参数，用过id参数去获取互动视频信息
                    let that = this;
                    $.ajax({
                        type: "get",
                        url: `http://139.186.155.167/S9vC7rYOo4.php/small/resource/edit?id=${href}`,
                        success: function (res) {
                            console.log(res);
                            that.info = JSON.parse(res.data.context);
                            console.log(JSON.parse(res.data.context));
                            that.transParam();
                        }
                    });
                },
                transParam() {
                    this.vidSrc = this.info.playUrl;
                    this.children = this.info;
                    // console.log(this.children);
                }
            },
            created() {
                this.getAddress();
            },
            watch: {
                // children:{
                //     immediate:true,
                //     handler(nV,oV){
                //         console.log(nV,oV);
                //     }
                // }
            }
        });
        document.addEventListener("webkitfullscreenchange", function (e) {
            document.webkitCancelFullScreen(); //退出全屏
            // console.log(e)  //target: video#preVideo  返回的是元素 所以不能当作字符串用
        });
    </script>
</body>

</html>